<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>店主新增页面</title>
    <script type="text/javascript" src="/bsc/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/bsc/static/common/bootstrap/js/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/bsc/static/common/bootstrap/js/bootstrap/css/bootstrap.min.css" >
	<script type="text/javascript" src="/bsc/static/common/bootstrapvaildator/js/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="/bsc/static/common/bootstrapvaildator/js/language/zh_CN.js"></script>
<script type="text/javascript">
  function op(){
	  document.forms[0].action="/bsc/shop/revert";
	  document.forms[0].submit();
  }
  
</script>
</head>
<body style="margin: 30px;">
   <div class="container">
   <center>
    <form method="post" action="" name="form" enctype="multipart/form-data" id="form">
<table  class="table table-bordered">
<tr>
<td align="center">
	<div class="form-group">
<label for="account">店主账号:</label>
</div>
</td>
<td>
<div class="form-group">
<input  type="text" name="account" id="account" class="form-control"  >
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="username">姓名:</label>
</div>
</td>
<td>
<div class="form-group">
<input  type="text" name="username" id="username" class="form-control">
</div>
</td>
</tr>

<tr>
<td align="center">
	<div class="form-group">
<label for="phone">电话:</label>
</div>
</td>
<td>
 <div class="form-group">
<input  type="text" name="phone" id="phone" class="form-control">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="idno">身份证号:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="idno" id="idno" class="form-control">
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="sex">性别:</label>
</div>
</td>
<td>
 <div class="form-group">
  <select  name="sex" id="sex" class="form-control">
<option value="-1">请选择</option>
<option value="0">保密</option>
<option value="1">男</option>
<option value="2">女</option> 
</select>
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="status">用户状态:</label>
</div>
</td>
<td>
 <div class="form-group">
 <select name="status" id="status" class="form-control">
<option value="-1">请选择</option>
<option value="0">停用</option>
<option value="1">启用</option>  
</select>
</div>
</td>
</tr>
<tr>
<td align="center">
	<div class="form-group">
<label for="file">头像:</label>
</div>
</td>
<td>
 <div class="form-group">
 <div id="imgPreview"></div>
<input type="file" name="file" id="file" class="form-control" onchange="PreviewImage(this)">
</div>
</td>
<td align="center">
	<div class="form-group">
<label for="email">邮箱:</label>
</div>
</td>
<td>
 <div class="form-group">
<input type="text" name="email" id="email" class="form-control">
</div>
</td>
</tr>

</table>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="op()">返回</button>
<button type="button" class="btn btn-primary" name="zjjpreserve" id="zjjpreserve">保存</button>
</div>
</form>
</center>
   </div>
</body>
<script type="text/javascript">
//开始表单验证
var form = $('#form');
$(document).ready(function() {
	form.bootstrapValidator({
		message: '输入值不合法',
		feedbackIcons: {
			valid: 'glyphicon glyphicon-ok',
			invalid: 'glyphicon glyphicon-remove',
			validating: 'glyphicon glyphicon-refresh'
		},
		fields: {
			account: {
				message: '账号不合法',
				validators: {
					notEmpty: {
						message: '账号不能为空'
					},
					stringLength: {
						min: 2,
						max: 6,
						message: '请输入2到6个字符'
					},
					remote: {
			            message: '账号已注册',
			            url: '/bsc/shop/pas',
			            data : function(){
			            	return{
			            		account:$("#account").val()
			            }
			            },//这里默认会传递该验证字段的值到后端
			            delay:2000 //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，
			        } 
				}
			},
			username: {
				message: '姓名不合法',
				validators: {
					notEmpty: {
						message: '姓名不能为空'
					},
					stringLength: {
						min: 2,
						max: 6,
						message: '请输入2到6个字符'
					},
					regexp: {
						regexp: /^[\u4e00-\u9fa5]{0,}$/,
						message: '只能由汉字组成'
					}
					
				}
			},
			
			phone: {
				message: '手机号不合法',
				validators: {
					notEmpty: {
						message: '手机号不能为空'
					},
					stringLength: {
						min: 11,
						max: 11,
						message: '请输入11位数'
					},
					regexp: {
						regexp: /^[0-9]*$/,
						message: '只能由数字组成'
					},
					remote: {
			            message: '账号已注册',
			            url: '/bsc/shop/pas',
			            data : function(){
			            	return{
			            		phone:$("#phone").val()
			            }
			            },//这里默认会传递该验证字段的值到后端
			            delay:2000 //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，
			        } 
				}
			},
			idno: {
				message: '身份证不合法',
				validators: {
					notEmpty: {
						message: '身份证不能为空'
					},
					stringLength: {
						min: 18,
						max: 18,
						message: '请输入18位数'
					},
					regexp: {
						regexp: /^[0-9]*$/,
						message: '只能由数字组成'
					},
					remote: {
			            message: '账号已注册',
			            url: '/bsc/shop/pas',
			            data : function(){
			            	return{
			            		idno:$("#idno").val()
			            }
			            },//这里默认会传递该验证字段的值到后端
			            delay:2000 //这里特别要说明，必须要加此属性，否则用户输入一个字就会访问后台一次，会消耗大量的系统资源，
			        } 
				}
			},
			sex: {
				validators : {
					notEmpty : {//检测非空,radio也可用  
						message : '性别不能为空'
					},
					callback : {
						message : '必须选择一个',
						callback : function(value, validator) {

							if (value == -1) {
								return false;
							} else {
								return true;
							}
						}
					}
				}
			},
			status: {
				validators : {
					notEmpty : {//检测非空,radio也可用  
						message : '状态不能为空'
					},
					callback : {
						message : '必须选择一个',
						callback : function(value, validator) {

							if (value == -1) {
								return false;
							} else {
								return true;
							}
						}
					}
				}
			},
			file: {
                validators: {
                    notEmpty: {
                        message: '上传图片不能为空'
                    },
                    file: {
                        extension: 'png,jpg,jpeg',
                        type: 'image/png,image/jpg,image/jpeg',
                        message: '请重新选择图片'
                    }
                }
            },
            email: {
				message: '邮箱不合法',
				validators: {
					notEmpty: {
						message: '邮箱不能为空'
					},
					regexp: {
						regexp: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
						message: '只能由数字组成'
					}
					
				}
			}
		}
	});
	
	//点击保存按钮进行 表单验证 
	//验证成功 提交表单 刷新界面
	$("#zjjpreserve").click(
		function() {
			console.log("---");
			//进行表单验证
			var bv = form.data('bootstrapValidator');
			bv.validate();
			if(bv.isValid()) {
				document.forms[0].action="/bsc/shop/save";
				document.forms[0].submit();
			}
		}		
	);
	
});
//表单验证结束
function PreviewImage(imgFile) {
	          var path = window.URL.createObjectURL(imgFile.files[0]);
	          document.getElementById("imgPreview").innerHTML = "<img id='img1' width='80px' height='80px' src='" + path + "'/>";
	}

</script>
</html>